import React,{useState,useEffect,useRef} from 'react'
import {Tabs,Button} from 'antd'
import '@/assets/style/components.less'
export default function Tab(props:any){
  const [allPanes,setAllPanes]:any = useState([])
  const [panes,setPanes] = useState([
    {
      title:'标签1',
      key:1, 
      closable:false
    },
    {
      title:'标签2',
      key:2,
      closable:false
    },
    {
      title:'标签3',
      key:3,
      closable:false
    }
  ])
  const tableId = useRef(Math.random()) ;
  const [style,setStyle] = useState({
    left:0,
    top:0
   })
   const [showMenu,setShowMenu] = useState(false)
   const [operation,setOperation]:any = useState([])
  const {TabPane} = Tabs
  useEffect(()=>{
    const tables = document.getElementById(tableId.current)
    if(tables){
      tables.oncontextmenu = function(e:any) {
        // 阻止鼠标默认事件
        e.preventDefault();
      }
       tables.onmouseup = function(e:any){
          if(e.button == 2){
            const trueOrfalse = isClassName(e.path)
            if(trueOrfalse){
              let item = panes.filter((t:any) => t.title == e.target.innerText)
              
              let newStyle = {
                ...style
              }
              newStyle.left = e.clientX-256
              newStyle.top = e.clientY - 100
              setOperation([...item])
              setStyle(newStyle)
              setShowMenu(true)
            } else {
              closeMenu()
            }    
          } else {
            closeMenu()
          }
        }
       
    }
    
  },[])
  useEffect(()=>{
    setAllPanes(panes)
  },[props])
  function isClassName(list:any){
      for(let item in list){
        if(list[item].className !== undefined && typeof list[item].className == 'string'){
          if(list[item].className.includes('ant-tabs-tab')){
            return true
           } else {
             if(item == (list.length -1)){
              return false
             }
           }
        } else {
          if(item == (list.length -1)){
            return false
           }
        }
        
      }
  }
  function onChange(e:any){
    console.log('this.change',e)
  }
  function refresh(){
    let arr:any = []
    allPanes.map((el:any) =>{
        arr.push(el)
    })
    setPanes([...arr])
    closeMenu()
  }
  function closeOnLeft(){
      let arr:any = []
      panes.map((el:any) =>{
        if(el.key >= operation[0].key){
          arr.push(el)
        }
      })
      setPanes([...arr])
      closeMenu()
  }
  function closeOnRight(){
    let arr:any = []
    panes.map((el:any) =>{
      if(el.key <= operation[0].key){
        arr.push(el)
      }
    })
    setPanes([...arr])
    closeMenu()
  }
  function closeMenu(){
    setShowMenu(false)
  }
  function closeOther(){
    let arr = [...operation]
    setPanes([...arr])
    closeMenu()
  }
  return (
    <div>
      <Tabs
          id={tableId.current}
          hideAdd
          onChange={onChange}
          type="editable-card"
        >
          {panes.map((pane:any,index:number) => (
            <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
              {
                props.children[index]
              }
            </TabPane>
          ))}
        </Tabs>
        {showMenu && <div className='menu_list' style={style}>
              <Button onClick={refresh}>刷新</Button>
              <Button onClick={closeOnLeft}>关闭左侧</Button>
              <Button onClick={closeOnRight}>关闭右侧</Button>
              <Button onClick={closeOther}>关闭其他</Button>
        </div>}
    </div>
  )
}
